'use client'
import './index.scss'
import React, { useState, useEffect } from "react"
import { Button, Input, Spin, Empty, Modal, Pagination, message } from 'antd'
import { ArrowLeftOutlined, SearchOutlined } from '@ant-design/icons';
import keyStore from '@/app/store/key'
import { ListChunk, AddChunk } from '@/app/api/RAGflow/index'
import ChunkItem from './ChunkItem/page'
const { TextArea } = Input;

interface ChunkProps {
    data: any,
    setDate: (value: boolean) => void
}

const Chunk: React.FC<ChunkProps> = ({ data, setDate }) => {
    const [chunklist, setchunklist] = useState<any>([]);
    const [queryvalue, setqueryvalue] = useState<string>('');
    const [loding, setloding] = useState<boolean>(true);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [textareavalue, settextareavalue] = useState<string>('');
    const [currentPage, setCurrentPage] = useState<number>(1); // 当前页码
    const [pageSize, setPageSize] = useState<number>(10); // 每页显示条数
    const [total, setTotal] = useState<number>(0); // 数据总数

    const { RAGFlowKey } = keyStore();

    useEffect(() => {
        getchunk();
    }, [currentPage, pageSize]); // 监听页码和每页条数变化

    const getchunk = () => {
        setloding(true);
        ListChunk(data.dataset_id, data.id, queryvalue, currentPage, pageSize, '', RAGFlowKey).then((res: any) => {
            setchunklist(res.data.chunks);
            setTotal(res.data.total); // 设置总数
            console.log(res);
            setloding(false);
        });
    };

    const handlePageChange = (page: number, pageSize?: number) => {
        setCurrentPage(page);
        if (pageSize) {
            setPageSize(pageSize);
        }
    };

    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            getchunk();
        }
    };

    return (
        <div className="chunk">
            <div className="chunk_title">
                <div>
                    <ArrowLeftOutlined onClick={() => { setDate(true); }} />
                    {data.name}
                </div>
                <div>
                    <Input
                        size="large"
                        style={{ height: '32px', width: '200px' }}
                        placeholder="搜索"
                        prefix={<SearchOutlined />}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                            if (e.target.value === '') { getchunk(); }
                            setqueryvalue(e.target.value);
                        }}
                        onKeyDown={handleKeyPress}
                    />
                    <Button onClick={() => { setIsModalOpen(true); }}>添加分段</Button>
                </div>
            </div>
            {loding && <Spin size="large" className="spin" />}
            {!loding && chunklist.length === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" className="empty" />}
            <div className='ChunkItem'>
                <ChunkItem data={data} setDate={(value) => { getchunk(); }} chunklist={chunklist} readonly={false} />
            </div>
            <div className='pagination'>
                <Pagination
                    current={currentPage}
                    pageSize={pageSize}
                    total={total}
                    onChange={handlePageChange}
                    showTotal={(total) => `共 ${total} 条`}
                    pageSizeOptions={[5, 10, 30, 50, 100]}
                    showSizeChanger
                />
            </div> 

            <Modal
                title="添加分段"
                open={isModalOpen}
                onCancel={() => { setIsModalOpen(false); settextareavalue(''); }}
                closeIcon={null}
                footer={[
                    <>
                        <Button onClick={() => { setIsModalOpen(false); }}>取消</Button>     
                        <Button type="primary" onClick={() => {
                            console.log(data.dataset_id, data.id, textareavalue, RAGFlowKey, '添加分段');
                            AddChunk(data.dataset_id, data.id, { content: textareavalue }, RAGFlowKey).then((res: any) => {
                                if (res.code == 0) {
                                    setIsModalOpen(false);
                                    settextareavalue('');
                                    message.success('添加成功');
                                    setTimeout(() => {
                                        getchunk();
                                    }, 1000)
                                } else {
                                    message.error(res.message);
                                }

                            })
                        }}>添加</Button>
                    </>
                ]}
            >
                <TextArea
                    value={textareavalue}
                    placeholder="请输入分段名称"
                    onChange={(e: any) => settextareavalue(e.target.value)}
                    autoSize={{ minRows: 10, maxRows: 10 }}
                />
            </Modal>
        </div>
    );
};

export default Chunk;